<template>
	<div class="index">
    <top></top>
    <div class="flexbc ww" style="padding: 0px 0 50px;">
      <div style="flex: 1;">
        <div style=" font-family: 'Fira Mono'; font-style: normal; font-weight: 700; color: #2180C1; font-size: 40px; line-height: 150%;">Österreichisches Sprachdiplom Deutsch</div>
        <div style=" font-weight: bold; margin-top: 10px; line-height: 1.5; font-size: 40px;     color: #666;">国际公认的德语考试和证书，适合儿童、青少年学习者和成人</div>
      </div>
      <div style="flex: 1;">
        <img src="../../../static/img/osd-header.png">
      </div>
    </div>

    <div class="ww" style="padding:0 90px 50px;">
      <div style="font-size: 36px;  line-height: 160%; padding-bottom: 19px;">您要做什么？</div>
      <div class="flexc" style="gap: 20px;">
        <div style="flex: 1; position: relative; box-shadow: 0 4px 12px #E2E2E2; background: #fff;" class="ani">
          <div><img src="../../../static/img/osd2.png"></div>
          <div style=" padding: 27px 20px 48px;">
            <div style="font-size: 18px; line-height: 160%; text-align: center; color: rgba(0, 0, 0, 0.5);">对于考试中心和考官</div>
            <div style="font-weight: 700; font-size: 22px; line-height: 165%; text-align: center; color: #212831; opacity: 0.75;">我想提供 ÖSD 考试</div>
            <div style="width: 58px; height: 58px; border-radius: 58px; background: #20323F; position: absolute; bottom: -29px; left: 50%; margin-left: -29px; text-align: center; line-height: 58px; color: #fff;" class="yuan">
              <i class="el-icon-right"></i>
            </div>
          </div>
        </div>
        <div style="flex: 1; position: relative; box-shadow: 0 4px 12px #E2E2E2; background: #fff;" class="ani">
          <div><img src="../../../static/img/osd3.png"></div>
          <div style=" padding: 27px 20px 48px;">
            <div style="font-size: 18px; line-height: 160%; text-align: center; color: rgba(0, 0, 0, 0.5);">对于参与者</div>
            <div style="font-weight: 700; font-size: 22px; line-height: 165%; text-align: center; color: #212831; opacity: 0.75;">我需要 ÖSD 证书</div>
            <div style="width: 58px; height: 58px; border-radius: 58px; background: #20323F; position: absolute; bottom: -29px; left: 50%; margin-left: -29px; text-align: center; line-height: 58px; color: #fff;" class="yuan">
              <i class="el-icon-right"></i>
            </div>
          </div>
        </div>
        <div style="flex: 1; position: relative; box-shadow: 0 4px 12px #E2E2E2; background: #fff;" class="ani">
          <div><img src="../../../static/img/osd1.png"></div>
          <div style=" padding: 27px 20px 48px;">
            <div style="font-size: 18px; line-height: 160%; text-align: center; color: rgba(0, 0, 0, 0.5);">关于 ÖSD 的信息</div>
            <div style="font-weight: 700; font-size: 22px; line-height: 165%; text-align: center; color: #212831; opacity: 0.75;">我想了解更多关于 ÖSD 的信息</div>
            <div style="width: 58px; height: 58px; border-radius: 58px; background: #20323F; position: absolute; bottom: -29px; left: 50%; margin-left: -29px; text-align: center; line-height: 58px; color: #fff;" class="yuan">
              <i class="el-icon-right"></i>
            </div>
          </div>
        </div>
      </div>
    </div>

    <div class="flexbc ww">
      <div style="font-size: 36px; line-height: 160%; padding-bottom: 19px;">ÖSD 考试</div>
      <div style="font-size: 18px; line-height: 165%; color: #0872BA;">关于 ÖSD 考试的一切</div>
    </div>
    <div class="flexc ww" style=" font-size: 18px;line-height: 165%; margin-bottom: 40px; color: #666;">
      ÖSD 提供广泛的国际认可考试，这些考试被世界各地的大学、雇主、专业机构和政府所接受。考试基于欧洲语言共同参考框架 （CEFR） 的指导方针，从初学者的 A1 开始，到最高级别的专业语言技能的 C2。
    </div>
    <div class="ww" style=" font-size: 18px;line-height: 165%; margin-bottom: 40px; color: #666;">
      考试形式于 2019 年进行了修订，采用考试模块可以单独或相互组合的形式。
    </div>
    <div class="flexcc ww" style="margin-bottom: 40px;">
      <div style="margin-right: 15px;"><img src="../../../static/img/icon-ZA1.svg" style="width: 54px; height: 54px;"></div>
      <div style="margin-right: 15px;"><img src="../../../static/img/icon-KIDA1.svg" style="width: 54px; height: 54px;"></div>
      <div style="margin-right: 15px;"><img src="../../../static/img/icon-ZA2.svg" style="width: 54px; height: 54px;"></div>
      <div style="margin-right: 15px;"><img src="../../../static/img/icon-KIDA2.svg" style="width: 54px; height: 54px;"></div>

      <div style="margin-right: 15px;"><img src="../../../static/img/icon-ZDO_B1.svg" style="width: 54px; height: 54px;"></div>
      <div style="margin-right: 15px;"><img src="../../../static/img/icon-ZB1.svg" style="width: 54px; height: 54px;"></div>
      <div style="margin-right: 15px;"><img src="../../../static/img/icon-ZB2.svg" style="width: 54px; height: 54px;"></div>
      <div style="margin-right: 15px;"><img src="../../../static/img/icon-ZC1.svg" style="width: 54px; height: 54px;"></div>
      <div style="margin-right: 15px;"><img src="../../../static/img/icon-ZC2.svg" style="width: 54px; height: 54px;"></div>
    </div>

    <div style="background: #FFFFFF; border: 1px solid #DBDCDC; box-shadow: 0px 4px 20px rgba(124, 124, 124, 0.12); border-radius: 4px; padding: 32px; position: relative; z-index: 9; margin-bottom: 50px;" class="flexb ww">
      <div><img src="../../../static/img/icon-ZA1.svg" style="width: 188px; height: 188px;"></div>
      <div style="flex-grow: 1; margin-left: 32px;">
        <div class="flexbc" style="line-height: 165%; font-size: 24px; margin-bottom: 20px;">
          <div>ÖSD Zertifikat A1</div>
          <div style="font-size: 18px; line-height: 165%; color: #0872BA;">了解更多信息 ></div>
        </div>
        <div style="font-size: 18px; line-height: 28px;  margin-bottom: 20px;   color: #666;">考试 ÖSD Zertifikat A1，考生应该能够在日常生活的简单情况下进行基本交流。</div>
        <div class="flexc">
          <div style="color: #FFF; background: #0872BA; width: 175px; line-height: 42px; border-radius: 21px; text-align: center; font-weight: bold;">ÖSD Zertifikat A1</div>

          <div style="color: #0872BA; border:2px #0872BA solid; width: 265px; line-height: 38px; margin-left: 20px; border-radius: 21px; text-align: center; font-weight: bold;">ÖSD Zertifikat A1 / Österreich</div>
        </div>
      </div>
    </div>

<!--    <div style="margin: -40px auto 20px; width: 1920px; position: relative; z-index: 8; background: url(../../../static/img/beijing.jpg) no-repeat;">
      <div class="flexbc">
        <div>
          <div>ŌSD 疑问解答</div>
          <div>
            这里有一些关于 ŌSD 最常见问题的解答，如果您还有别的疑问，欢迎致电联系我们，点击下方链接了解更多。
          </div>
          <div></div>
        </div>
        <div></div>
      </div>
    </div> -->

    <div class="flexbc ww">
      <div style="font-size: 36px; line-height: 160%; padding-bottom: 19px;">ÖSD新闻</div>
      <div style="font-size: 18px; line-height: 165%; color: #0872BA;">所有新闻 ></div>
    </div>
    <div class="ww" style="margin-bottom: 50px;" >
      <el-carousel :interval="10000" arrow="always">
          <el-carousel-item v-for="item in 4" :key="item">
            <div class="flexc" style="gap: 20px; padding: 0 90px;">
              <div style="flex: 1; padding: 10px;">
                <div><img src="../../../static/img/osd2.png"></div>
                <div style=" font-weight: 700; font-size: 20px; line-height: 32px; margin-bottom: 12px; color: #18191B;">德语课程中的人工智能</div>
                <div style=" font-size: 16px; line-height: 28px; color: #18191B; opacity: 0.65; margin-bottom: 12px;">在获得 ÖSD 证书的路上：德语课程中的人工智能 – 数字帮助...</div>
                <div style="font-weight: 700; font-size: 18px; line-height: 154%; margin-top: 24px; color: #0872BA;">阅读更多...</div>
              </div>
              <div style="flex: 1; padding: 10px;">
                <div><img src="../../../static/img/osd2.png"></div>
                <div style=" font-weight: 700; font-size: 20px; line-height: 32px; margin-bottom: 12px; color: #18191B;">德语课程中的人工智能</div>
                <div style=" font-size: 16px; line-height: 28px; color: #18191B; opacity: 0.65; margin-bottom: 12px;">在获得 ÖSD 证书的路上：德语课程中的人工智能 – 数字帮助...</div>
                <div style="font-weight: 700; font-size: 18px; line-height: 154%; margin-top: 24px; color: #0872BA;">阅读更多...</div>
              </div>
              <div style="flex: 1; padding: 10px;">
                <div><img src="../../../static/img/osd2.png"></div>
                <div style=" font-weight: 700; font-size: 20px; line-height: 32px; margin-bottom: 12px; color: #18191B;">德语课程中的人工智能</div>
                <div style=" font-size: 16px; line-height: 28px; color: #18191B; opacity: 0.65; margin-bottom: 12px;">在获得 ÖSD 证书的路上：德语课程中的人工智能 – 数字帮助...</div>
                <div style="font-weight: 700; font-size: 18px; line-height: 154%; margin-top: 24px; color: #0872BA;">阅读更多...</div>
              </div>
              <div style="flex: 1; padding: 10px;">
                <div><img src="../../../static/img/osd2.png"></div>
                <div style=" font-weight: 700; font-size: 20px; line-height: 32px; margin-bottom: 12px; color: #18191B;">德语课程中的人工智能</div>
                <div style=" font-size: 16px; line-height: 28px; color: #18191B; opacity: 0.65; margin-bottom: 12px;">在获得 ÖSD 证书的路上：德语课程中的人工智能 – 数字帮助...</div>
                <div style="font-weight: 700; font-size: 18px; line-height: 154%; margin-top: 24px; color: #0872BA;">阅读更多...</div>
              </div>
            </div>
          </el-carousel-item>
      </el-carousel>
    </div>
    <div style="border-top: 1px #0872BA solid; background: #f7f7f7;">
      <div class="ww" style="padding: 20px 0;">
        <div style="font-size: 36px; line-height: 160%; padding-bottom: 19px;">联系我们</div>
        <div class="flexbc">
          <div style="font-size: 18px; line-height: 165%; color: #666;">
            <div>地址：山东省青岛市黄岛区太白山路23号青岛德国企业中心2楼</div>
            <div>邮编：266000</div>
            <div>联系电话：15263040593</div>
            <div>微信：15263040593</div>
            <div>邮箱：osd-china@outlook.com</div>
          </div>
          <div><img src="../../../static/img/erweima.png" style=" width: 150px; height: 150px;"></div>
        </div>
      </div>

    </div>
	</div>
</template>

<script>
  import top from '../top2.vue'
  import left from '../left.vue'
	export default {
		name: 'index',
    components:{
      left,top
    },
		data() {
			return {

			}
		},
		created() {


		},
		mounted() {

		},
		methods: {

    }
	}
</script>


<style scoped >
  .ani{ cursor: pointer; transition: all 0.5s;
    &:hover{
      transform: scale(1.1);
      .yuan{ background: #0872BA !important;}
    }
  }
  /deep/ .el-carousel__arrow{ background: #0872BA;}
  /deep/ .el-carousel__button{ background: #0872BA;}
  /deep/ .el-carousel{ padding-bottom: 20px;}

</style>
